<template>
  <div class="team-info-container animate__animated animate__fadeIn">
    <div class="background-shapes">
      <div class="shape shape1"></div>
      <div class="shape shape2"></div>
      <div class="shape shape3"></div>
    </div>
    <h1 class="title animate__animated animate__fadeInDown">信息查询</h1>
    <div class="button-group">
      <el-button class="custom-button animate__animated animate__fadeInLeft animate__delay-1s" @click="fetchTeams">查询所有团队信息</el-button>
      <el-button class="custom-button animate__animated animate__fadeInLeft animate__delay-1s" @click="fetchTeamMembers">查询所有团队成员信息</el-button>
      <el-button class="custom-button animate__animated animate__fadeInLeft animate__delay-1s" @click="fetchAProblems">查询所有 A 类题目信息</el-button>
      <el-button class="custom-button animate__animated animate__fadeInRight animate__delay-1s" @click="fetchProblemSelections">查询所有团队选题信息</el-button>
      <el-button class="custom-button animate__animated animate__fadeInRight animate__delay-1s" @click="fetchJudges">查询所有裁判信息</el-button>
      <el-button class="custom-button animate__animated animate__fadeInRight animate__delay-1s" @click="fetchAScores">查询所有 A 类评分信息</el-button>
      <el-button class="custom-button animate__animated animate__fadeInRight animate__delay-1s" @click="fetchBScores">查询所有 B 类评分信息</el-button>
    </div>

    <h2 class="subtitle animate__animated animate__fadeIn animate__delay-1s">{{ currentTableName }}</h2>

    <div class="table-container animate__animated animate__fadeInUp animate__delay-1s">
      <el-table :data="paginatedData" class="custom-table">
        <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label"></el-table-column>
      </el-table>

      <el-pagination
        v-if="totalItems > 0"
        class="custom-pagination animate__animated animate__fadeIn animate__delay-2s"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        layout="total, prev, pager, next, jumper"
        @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElNotification } from 'element-plus';
import axios from '@/utils/request';
import 'animate.css';

const data = ref([]);
const columns = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const currentTableName = ref('');

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return data.value.slice(start, start + pageSize.value);
});

// 查询所有团队信息
const fetchTeams = async () => {
  try {
    const response = await axios.get('/select/teams');
    data.value = response;
    totalItems.value = response.length;
    columns.value = [
      { prop: 'teamId', label: '团队编号' },
      { prop: 'teamName', label: '团队名称' },
      { prop: 'school', label: '学校' },
      { prop: 'schoolType', label: '类型' }
    ];
    currentTableName.value = '团队信息';
    ElNotification({
        title: '查询成功！',         
        type: 'success',
      });
  } catch (error) {
      ElNotification({
        title: '查询失败',
        message: error.message,
        type: 'error',
      });
  }
};

// 查询所有团队成员信息
const fetchTeamMembers = async () => {
  try {
    const response = await axios.get('/select/team-members');
    data.value = response;
    totalItems.value = response.length;
    columns.value = [
      { prop: 'teamId', label: '团队编号' },
      { prop: 'name', label: '成员姓名' },
      { prop: 'role', label: '角色' }
    ];
    currentTableName.value = '团队成员信息';
  } catch (error) {
      ElNotification({
        title: '查询失败',
        message: error.message,
        type: 'error',
      });
  }
};

// 查询所有 A 类题目信息
const fetchAProblems = async () => {
  try {
    const response = await axios.get('/select/a-problems');
    data.value = response;
    totalItems.value = response.length;
    columns.value = [
      { prop: 'problemId', label: '题目编号' },
      { prop: 'problemName', label: '题目名称' },
      { prop: 'company', label: '公司' }
    ];
    currentTableName.value = 'A 类题目信息';
  } catch (error) {
      ElNotification({
        title: '查询失败',
        message: error.message,
        type: 'error',
      });
  }
};

// 查询所有团队选题信息
const fetchProblemSelections = async () => {
  try {
    const response = await axios.get('/select/problem-selections');
    data.value = response;
    totalItems.value = response.length;
    columns.value = [
      { prop: 'teamId', label: '团队编号' },
      { prop: 'problemName', label: '题目名称' },
      { prop: 'trackType', label: '赛道类型' }
    ];
    currentTableName.value = '选题信息';
  } catch (error) {
      ElNotification({
        title: '查询失败',
        message: error.message,
        type: 'error',
      });
  }
};

// 查询所有裁判信息
const fetchJudges = async () => {
  try {
    const response = await axios.get('/select/judges');
    data.value = response;
    totalItems.value = response.length;
    columns.value = [
      { prop: 'id', label: '裁判编号' },
      { prop: 'name', label: '裁判姓名' },
      { prop: 'unit', label: '单位' },
      { prop: 'proType', label: '专业类型' }
    ];
    currentTableName.value = '裁判信息';
  } catch (error) {
      ElNotification({
        title: '查询失败',
        message: error.message,
        type: 'error',
      });
  }
};

// 查询所有 A 类评分信息
const fetchAScores = async () => {
  try {
    const response = await axios.get('/select/a-scores');
    data.value = response;
    totalItems.value = response.length;
    columns.value = [
      { prop: 'num', label: '评分编号' },
      { prop: 'judgeId', label: '裁判编号' }, 
      { prop: 'trackType', label: '赛道类型' }, 
      { prop: 'teamId', label: '团队编号' }, 
      { prop: 'score', label: '总分' }
    ];
    currentTableName.value = "A 类评分信息";
  } catch (error) {
     ElNotification({
       title:'查询失败',
       message:error.message,
       type:'error'
     });
   }
};

// 查询所有 B 类评分信息
const fetchBScores = async () => {
  try {
    const response = await axios.get('/select/b-scores');
    data.value = response;
    totalItems.value = response.length;
    columns.value = [
      { prop: 'num', label: '评分编号' },
      { prop: 'judgeId', label: '裁判编号' }, 
      { prop: 'trackType', label: '赛道类型' }, 
      { prop: 'teamId', label: '团队编号' }, 
      { prop: 'score', label: '总分' }
    ];
    currentTableName.value = "B 类评分信息";
  } catch (error) {
     ElNotification({
       title:'查询失败',
       message:error.message,
       type:'error'
     });
   }
};

const handlePageChange = (newPage) => {
   currentPage.value=newPage;
};
</script>

<style scoped>
.team-info-container {
  position: relative;
  max-width: 1200px;
  margin: 20px auto;
  padding: 30px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 255, 0.95) 100%);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.background-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}

.shape {
  position: absolute;
  background: linear-gradient(45deg, rgba(26, 115, 232, 0.1), rgba(66, 133, 244, 0.1));
  border-radius: 50%;
  animation: float 15s infinite ease-in-out;
}

.shape1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
}

.shape2 {
  width: 400px;
  height: 400px;
  bottom: -200px;
  right: -200px;
  animation-delay: -5s;
}

.shape3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  animation-delay: -7s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

.title {
  color: #1a73e8;
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.subtitle {
  color: #4285f4;
  text-align: center;
  margin: 20px 0;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-bottom: 30px;
}

.custom-button {
  background: linear-gradient(120deg, #1a73e8 0%, #4285f4 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(26, 115, 232, 0.2);
}

.custom-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
}

.table-container {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.custom-table {
  width: 100%;
  margin-bottom: 20px;
}

.custom-pagination {
  margin-top: 20px;
  text-align: center;
}

:deep(.el-table) {
  background: transparent !important;
}

:deep(.el-table th) {
  background: linear-gradient(120deg, #1a73e8 0%, #4285f4 100%);
  color: white;
}

:deep(.el-table tr:hover) {
  background: rgba(26, 115, 232, 0.1);
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #1a73e8;
}
</style>